import 'markdown-to-image/dist/style.css'
import { Md2Poster, Md2PosterContent, Md2PosterHeader } from 'markdown-to-image'
import type {Md2PosterProps} from 'markdown-to-image'
import { useEffect, useState } from 'react'

type Theme = Md2PosterProps['theme']

interface PosterConfig {
  title?: string
  content: string
  theme?: Theme
}


function App() {
  const [config, setConfig] = useState<PosterConfig>(() => {
    let cfg = (window as any)._INJECT_CONFIG_;
    if (!cfg) {
      return {theme:"gray",title:"",content:""}
    }
    return cfg
  })

  useEffect(() => {
    Object.assign(window, {
      updatePoster: (pc: PosterConfig) => {
        setConfig(pc)
      }
    })
  }, [])

  return (
    <Md2Poster theme={config.theme||'gray'} size='mobile' aspectRatio="16/9">
      {config.title && (
        <Md2PosterHeader className='text-[28px] font-bold'>{config.title}</Md2PosterHeader>
      )}
      <Md2PosterContent>{config.content}</Md2PosterContent>
    </Md2Poster>
  )
}

export default App